import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import store from "@/store";
import { axiosInstance } from "@/utils/request";
// import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "main",
        redirect: "/home",
    },
    {
        path: "/home",
        name: "Home",
        component: () => import("@/views/Home.vue"),
    },
    {
        path: "/columnDetail/:id",
        name: "ColumnDetail",
        component: () => import("@/views/ColumnDetail.vue"),
    },
    {
        path: "/login",
        name: "Login",
        component: () => import("@/views/Login.vue"),
        meta: { redirectAlreadyLogin: true },
    },
    {
        path: "/signUp",
        name: "SignUp",
        component: () => import("@/views/SignUp.vue"),
    },
    {
        path: "/createPost",
        name: "CreatePost",
        component: () => import("@/views/CreatePost.vue"),
        meta: { requiredLogin: true },
    },
    {
        path: "/Is",
        name: "Is",
        component: () => import("../views/Is.vue"),
    },
    {
        path: "/ProvideInject",
        name: "ProvideInject",
        component: () => import("../views/ProvideInject.vue"),
    },
    {
        path: "/ToRef",
        name: "ToRef",
        component: () => import("../views/ToRef.vue"),
    },
    {
        path: "/Raw",
        name: "Raw",
        component: () => import("../views/Raw.vue"),
    },
    {
        path: "/ReadOnly",
        name: "ReadOnly",
        component: () => import("../views/ReadOnly.vue"),
    },
    {
        path: "/Shallow",
        name: "Shallow",
        component: () => import("../views/Shallow.vue"),
    },
    {
        path: "/DomRef",
        name: "DomRef",
        component: () => import("../views/DomRef.vue"),
    },
    {
        path: "/to_refs",
        name: "ToRefs",
        component: () => import("../views/ToRefs.vue"),
    },
    {
        path: "/request_hook",
        name: "RequestHook",
        component: () => import("../views/Request_hook.vue"),
    },
    {
        path: "/mouse_click_hook",
        name: "MouseClickHook",
        component: () => import("../views/Mouse_click_hook.vue"),
    },
    {
        path: "/about",
        name: "About",
        component: () => import("../views/About.vue"),
    },
    {
        path: "/exchange",
        name: "Exchange",
        component: () => import("../views/Exchange.vue"),
    },
    {
        path: "/watch_computed",
        name: "Watch_computed",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ "../views/Watch_computed.vue"),
    },
];

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});
router.beforeEach((to, from, next) => {
    // if (to.meta.requiredLogin === true && !store.state.user.isLogin) {
    // 	next({ path: "/login" });
    // } else if (to.meta.redirectAlreadyLogin && store.state.user.isLogin) {
    // 	next({ path: "/" });
    // } else {
    // 	next();
    // }

    //判断vuex的isLogin是否为登录
    //判断localStorage是否有token
    //判断页面是否在登录页面
    //判断页面是否需要登录
    // const store = useStore();
    const { user, token } = store.state;
    const { redirectAlreadyLogin, requiredLogin } = to.meta;
    if (user.isLogin) {
        //登陆了处理是否在登录页面的逻辑
        if (redirectAlreadyLogin) {
            next("/");
        } else {
            next();
        }
    } else {
        if (token) {
            axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${token}`;
            store.dispatch("fetchCurrentUser").then(() => {
                    if (redirectAlreadyLogin) {
                        next("/");
                    } else {
                        next();
                    }
                }).catch(err => {
                    store.commit("logout");
                    next("/login");
                });
        } else {
            if (requiredLogin) {
                next("/login");
            } else {
                next();
            }
        }
    }
});
export default router;
